<template>
	<view class="page_con">
		<view class="list_con" style="flex: 1;">
			<view class="item">
				<view class="head">
					<image src="../../static/image/post_icon.png"></image>
				</view>
				<view class="info">
					<view class="line">
						<view class="name">
							张三
						</view>
						<view>
							铁西中医诊所
						</view>
					</view>
					<view class="line">
						<view>
							儿科
						</view>
						<view>
							13333333333
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn_con">
			<view class="btn" @click="show_add_user_qrcode">添加员工</view>
		</view>
		<u-popup v-model="show_qrcode" mode="bottom">
			<view class="add_user_con">
				<view class="add_user_con_top">
					<view class="qrcode_con">
						<uqrcode ref="uqrcode" canvas-id="qrcode" :value="add_url" :options="{ margin: 10 }"></uqrcode>
					</view>
					<view>
						<u-button v-for="(item,index) in user_type">
							<view class="type_item" @click="check_item(item)">
								<view class="check_icon">
									<u-icon v-if="check_id==item.type_id" name="checkbox-mark"></u-icon>
								</view>
								<view>
									{{item.type_name}}
								</view>
							</view>
						</u-button>
					</view>
				</view>
				<input :value="add_url"/>
				<view class="add_user_con_bottom">{{add_url}}</view>
				<view class="add_user_con_bottom">注意：切换不同身份后扫二维码，可以添加不同身份的员工</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { get_add_user_auth_token } from '@/util/api/api.js';
	
	export default {
		data() {
			return {
				show_qrcode:true,
				check_id:1,
				add_url:'',
				user_type:[
					{
						type_id:1,
						type_name:'前台医生'
					},
					{
						type_id:2,
						type_name:'后台医生'
					},
					{
						type_id:3,
						type_name:'药师'
					},
					{
						type_id:4,
						type_name:'财务'
					},
					{
						type_id:6,
						type_name:'发货员'
					},
					// 1前台医生2后台医生3药师4财务5管理员6发货员
				]
			}
		},
		methods: {
			show_add_user_qrcode(){
				this.check_item(this.user_type[0])
			},
			check_item({type_id}){
				this.check_id = type_id
				let that = this
				
				get_add_user_auth_token().then((res)=>{
					if (res.code==200) {
						console.log(res);
						let {protocol,host} = window.location
						
						let url = `/index.php/html5/index/check_add_user_linshi_key?backurl=${protocol+'//'+host}&auth_token=${res.data.auth_token}&type=${type_id}`
						
						const baseURL = getApp().globalData.domain
						
						that.add_url = baseURL+url
						that.show_qrcode = true;
					} else{
						uni.showToast({
							title:'操作失败'
						})
					}
				})
			}
		}
	}
</script>

<style>
.page_con{
	width: 100%;
	height: calc(100vh - 88rpx);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #F5F5F5;
}
.list_con{
	width: 750rpx;
	padding: 30rpx;
	border-radius: 8rpx;
	overflow-y: scroll;
}
.item{
	width: 690rpx;
	background: #FFFFFF;
	border-radius: 8rpx;
	display: flex;
	padding: 30rpx;
	margin-bottom: 30rpx;
}
.head{
	width: 90rpx;
	height: 90rpx;
	border-radius: 45rpx;
	overflow: hidden;
}
.head image{
	width: 100%;
	height: 100%;
}
.info{
	width: 550rpx;
}
.line{
	line-height: ;
	display: flex;
	justify-content: space-between;
	height: 50rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #999999;
	line-height: 28rpx;
}
.name{
	height: 32rpx;
	font-size: 34rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
	line-height: 32rpx;
}
.btn_con{
	width: 100%;
	height: 150rpx;
}
.btn{
	width: 690rpx;
	height: 88rpx;
	background: #15BBA2;
	border-radius: 44rpx;
	line-height: 88rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	margin: 30rpx;
}
.add_user_con{
	width: 690rpx;
	height:600rpx;
	margin: 30rpx;
}
.qrcode_con{
	display: flex;
}
.type_item{
	width: 150rpx;
	display: flex;
}
.check_icon{
	width: 40rpx;
	height: 50rpx;
}
.add_user_con_top{
	display: flex;
	justify-content: space-between;
}
.add_user_con_bottom{
	margin-top: 50rpx;
}
</style>